<template>
  <div class="detail">
    <header>
      <div class="header-returns" v-show="isshow">
        <i class="iconfont icon-zuojiantou" @click="goBack"></i>
        <i class="iconfont icon-home"></i>
      </div>

      <div class="header-bar" v-show="!isshow">
        <i class="iconfont icon-zuojiantou" @click="goBack"></i>
        <span :class="style ? '' : 'header-active'">商品详情</span>
        <span :class="style ? 'header-active' : ''">商品评价</span>
        <i class="iconfont icon-home"></i>
      </div>
    </header>
    <section class="wrapper">
      <!-- swiper -->
      <div class="section">
        <div class="swiper-main">
          <swiper :options="swiperOption">
            <!-- slides -->
            <!-- <swiper-slide v-for="(item, index) in swiperList" :key="index">
              <img :src="item.imgUrl" alt="" />
            </swiper-slide> -->
            <swiper-slide>
              <img :src="idData.imgUrl" alt="" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <!-- 文字详情 -->
        <div class="text">
          <h1>{{ idData.name }}</h1>
          <div>中杆硬 拍头重 落点尖锐 专业球员首选</div>
        </div>
        <div class="price">
          <div class="rmb">
            <span>￥</span>
            <span class="shuzi">{{ idData.price }}</span>
          </div>
          <div class="jg">
            <span>价格:</span>
            <del>128</del>
          </div>
        </div>
        <div class="jiange"></div>
        <div class="bf">
          <div class="chabi">
            <span class="a">羽币</span>
            <span>买就赠送22羽币</span>
          </div>
          <div class="server">
            <span class="b">服务</span>
            <span>满99元包邮 48小时发货 ...</span>
          </div>
        </div>
        <div class="jiange"></div>
        <div>
          <h5>商品详情</h5>
          <img style="width: 100%; height: 500px" :src="idData.imgUrl" alt="" />
        </div>
      </div>
    </section>

    <div class="footer">
      <div class="left">
        <ul>
          <li>
            <i class="iconfont icon-kefu"></i>
            <span>客服</span>
          </li>
          <li @click="goCart">
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
          </li>
          <li>
            <i class="iconfont icon-shoucang"></i>
            <span>收藏</span>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="car" @click="addCart">加入购物车</div>
        <div class="buy">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import http from "@/common/request";
import { Toast } from "vant";
export default {
  components: { swiper, swiperSlide },
  data() {
    return {
      id: 0,
      activeCur: 1,
      isshow: true,
      swiperOption: {
        autoplay: 3000,
        speed: 1000,
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          type: "fraction",
          clickable: true, //轮播按钮支持点击
        },
      },
      swiperList: [
        {
          imgUrl: "./images/badImages/d10.jpg",
        },
        {
          imgUrl: "./images/badImages/js10BLACK.jpg",
        },
      ],
      BetterScroll: "",
      scrollY: 0,
      style: false,
      idData: {},
    };
  },
  methods: {
    goCart() {
      this.$router.push({
        name: "Cart",
      });
    },
    async addCart() {
      let userInfo = localStorage.getItem("teaUserInfo");
      if (!userInfo) {
        this.$router.push({
          name: "Login",
        });
        return;
      }
      let res = await http.$axios({
        method: "post",
        url: "/api/addCart",
        data: {
          goodsId: this.id,
        },
        headers: {
          // 是否需要用户验证
          token: true,
        },
      });
      if (res.success) {
        Toast("物品添加成功");
      }

      console.log(res);
    },
    async getData(id) {
      let res = await http.$axios({
        url: `/api/goods/${id}`,
      });
      // console.log(res.data);
      this.idData = res.data[0];
      console.log(this.idData);
    },
    // 返回上一页
    goBack() {
      this.$router.back();
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getData(this.$route.query.id);
  },
  activated() {
    if (this.id != this.$route.query.id) {
      this.getData(this.$route.query.id);
      this.id = this.$route.query.id;
    }
  },
  mounted() {
    this.oBetterScroll = new BetterScroll(".wrapper", {
      movable: true,
      zoom: true,
      probeType: 3,
      click: true,
       disableTouch: false,
      bounce: false,
    });
    this.oBetterScroll.on("scroll", (pos) => {
      // console.log(pos);
      this.scrollY = -pos.y;
      if (this.scrollY > 175) {
        this.isshow = false;
      } else {
        this.isshow = true;
      }
      if (this.scrollY > 375) {
        this.style = true;
      } else {
        this.style = false;
      }
    });
  },
};
</script>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 8vh;
  background-color: #eee;
  display: flex;
}
.left {
  width: 40%;
  height: 100%;
}
.left ul {
  display: flex;
}
.left ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33.3%;
  height: 8vh;
}
.iconfont {
  font-size: 18px !important;
  padding-bottom: 2px;
}
.left ul li span {
  font-size: 13px;
  white-space: nowrap;
}
.right {
  width: 60%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
  color: #fff;
}
.car {
  height: 100%;
  flex: 1;
  background-color: orange;
  text-align: center;
  line-height: 8vh;
}
.buy {
  height: 100%;
  flex: 1;
  background-color: red;
  text-align: center;
  line-height: 8vh;
}
.text div {
  font-size: 16px;
  color: #aaa;
}
span {
  box-sizing: border-box !important;
}
.header-active {
  border-bottom: 2px solid red;
  box-sizing: border-box;
}
.header-bar .iconfont {
  height: 35px;
  width: 35px;
  font-size: 24px;
  text-align: center;
  line-height: 35px;
}
.detail {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  justify-content: space-between;
}
section {
  flex: 1;
  overflow: hidden;
}
.session {
  height: 100%;
}
header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 40px;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background-color: #eee;
  align-items: center;
  /* margin-top: 1px; */
}
.header-bar span {
  font-size: 18px;
  line-height: 45px;
}
.header-bar i {
  font-size: 20px;
}
.header-bar .icon-home {
  margin-right: 15px;
}

.header-returns {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  align-items: center;
}
.header-returns i {
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 24px;
  color: #eee;
  text-align: center;
  line-height: 35px;
}
.icon-zuojiantou {
  margin-left: 10px;
  margin-top: 5px;
}
.icon-home {
  margin-right: 10px;
  margin-top: 5px;
}
.jiange {
  height: 10px;
  width: 100%;
  background-color: #eee;
}
.price {
  padding: 15px 5px;
}
.rmb {
  color: #b0352f;
}
.shuzi {
  font-size: 22px;
  font-weight: 700;
}
.jg {
  padding-left: 5px;
  padding-top: 5px;
  font-size: 14px;
}
.text {
  padding: 15px 5px;
  border-bottom: 2px solid #eee;
}
.text h1 {
  font-size: 20px;
}
.text div {
  padding-top: 5px;
}
.swiper-main {
  width: 100%;
  height: 375px;
}
.swiper-main img {
  width: 100%;
  height: 370px;
}
.swiper-pagination {
  text-align: right;
  color: #f5f5f5;
  font-size: 16px;
  box-sizing: border-box;
  padding-right: 5px;
}

::v-deep .swiper-pagination-bullet-active {
  opacity: 1;
  background: #b0352f !important;
}
.bf {
  display: flex;
  flex-direction: column;
  height: 90px;
  width: 100%;
  font-size: 18px;
}
.bf .chabi {
  flex: 1;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.chabi .a {
  padding-left: 20px;
  padding-right: 30px;
}
.server {
  flex: 1;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
.server .b {
  padding-left: 20px;
  padding-right: 30px;
}
.bf .server {
  flex: 1;
}
h5 {
  padding-top: 10px;
  padding-left: 30px;
  color: red;
}
</style>>
